<html xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui" >  

    <ui:composition template="layout.xhtml">
        <ui:define name="corpo">
            <h:form>
                <div id="breadcrumb">
                    <p:commandLink  actionListener="#{managerIndex.redirect('index.xhtml')}" value="Inicio" update="@form" immediate="true"/> >
                    <p:commandLink  actionListener="#{managerIndex.redirect('indexPessoa.xhtml')}" value="Cliente" update="@form" immediate="true"/> >
                    <p:commandLink  value="Pesquisar Cliente" update="@form" immediate="true"/>
                </div>
            </h:form>
            <h:form id="buscar_form" acceptcharset="utf-8"> 
                <p:panel header="Pesquisar Cliente">
                    <p:growl showDetail="true"  id="msg" life="2000" />
                    <fieldset>
                        <legend>Informe o Documento</legend>
                        <h:panelGrid columns="2"  border="0" styleClass="textAlignRight" columnClasses="textAlignRight">
                            <h:outputLabel value="Pessoa:"/>
                            <p:selectOneRadio id="cpf-cnpj" value="#{managerConsultarPessoa.controle}"
                                              label="Selecione um item">
                                <f:selectItem itemLabel="Fisica"  itemValue="#{true}" />
                                <f:selectItem itemLabel="Juridica"  itemValue="#{false}"/>
                                <p:ajax update="@form, nome_fisica, nome_juridica, cpf_pessoa, cnpj_pessoa" event="change"/>

                            </p:selectOneRadio>
                            <h:outputLabel value="Nome:" rendered="#{managerConsultarPessoa.controle ? true : false}"/>
                            <p:inputText value="#{managerConsultarPessoa.nome}"   
                                         rendered="#{managerConsultarPessoa.controle ? true : false}"
                                         id="nome_fisica" size="50"/>

                            <h:outputLabel value="Cpf:" rendered="#{managerConsultarPessoa.controle ? true : false}"/>  
                            <p:inputMask value="#{managerConsultarPessoa.variavel}"  
                                         rendered="#{managerConsultarPessoa.controle ? true : false}"
                                         id="cpf_pessoa" mask="999.999.999-99"  maxlength="11" style="width: 165px"/>

                            <h:outputLabel value="Nome:" rendered="#{managerConsultarPessoa.controle ? false : true}"/>
                            <p:inputText value="#{managerConsultarPessoa.nome}"   
                                         rendered="#{managerConsultarPessoa.controle ? false : true}"
                                         id="nome_juridica" size="50"/>

                            <h:outputLabel value="Cnpj: " rendered="#{managerConsultarPessoa.controle ? false : true}"  />  
                            <p:inputMask value="#{managerConsultarPessoa.variavel}" 
                                         rendered="#{managerConsultarPessoa.controle ? false : true}"
                                         id="cnpj_pessoa" mask="99.999.999/9999-99" maxlength="14" style="width: 165px"/>


                        </h:panelGrid> 
                        <div class="buttonAction">
                            <p:commandButton icon="ui-icon-search" id="bt_pesquisar" value="Buscar" actionListener="#{managerConsultarPessoa.pesquisarPessoa()}" update="pessoaTable, msg, @form, cpf_pessoa, cnpj_pessoa" />
                                                
                            <p:commandButton icon="ui-icon-arrowreturnthick-1-w" value="Cancelar" actionListener="#{managerConsultarPessoa.reinit()}"
                                             action="#{managerIndex.redirect('indexPessoa.xhtml') }" immediate="true" /> 
                        </div>
                        <p:dataTable id="pessoaTable" var="pessoa" value="#{managerConsultarPessoa.pessoas}" 
                                     paginator="true" rows="5"
                                     paginatorPosition="bottom"
                                     paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"  
                                     rowsPerPageTemplate="5,10,15">     
                            <f:facet name="header">  
                                Cliente
                            </f:facet>
                            <p:column style="width:400px;">  
                                <f:facet name="header" >   
                                    Nome
                                </f:facet>  
                                <h:outputText value="#{pessoa.nome}" />  
                            </p:column>
                            <p:column style="width:200px;">  
                                <f:facet name="header" >   
                                    Cep
                                </f:facet>  
                                <h:outputText value="#{pessoa.endereco.cep}" />  
                            </p:column>
                            <p:column style="width:200px;">  
                                <f:facet name="header" >   
                                    Contato
                                </f:facet>  
                                <h:outputText value="#{pessoa.endereco.celular}" />  
                            </p:column>
                            <p:column style="width:80px;">  
                                <f:facet name="header">  
                                    <h:outputText value="Opções" />   
                                </f:facet>
                                <p:commandButton  icon="editar" 
                                                  actionListener="#{managerEditarPessoa.redirect('editarPessoa.xhtml', pessoa)}" 
                                                  update="@form"/> 
                                <p:commandButton  icon="view" 
                                                  actionListener="#{managerVisualizarPessoa.redirect('visualizarPessoa.xhtml',pessoa)}" 
                                                  update="@form"/>   
                            </p:column>  

                        </p:dataTable>  
                    </fieldset> 
                </p:panel>
            </h:form>
        </ui:define>
    </ui:composition>
</html>